<template>
  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div> -->
  <!-- <div>{{msg}}</div>
  <div @click="change">{{test}}</div>
  <div>{{a}}</div> -->
  <!-- <hello-world></hello-world> -->
  <router-view />
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { Options, Vue } from 'vue-class-component';
import { Watch, Prop, Emit } from 'vue-property-decorator';
// const res = require.context("./store", true, /\.ts$/);
@Options({
  data() {
    return {
      test: 222,
    };
  },
  methods: {
    change() {
      this.test++;
    },
  },
  components: {
    HelloWorld: defineAsyncComponent(
        () => import('@/components/HelloWorld.vue'),
    ),
  },
})
export default class HelloWorlds extends Vue {
  @Prop({ default: '11', type: String }) readonly msg!: string;
  @Prop({ default: 222, type: Number }) test!: number;

  @Emit()
  change() {
    this.test++;
  }

  // eslint-disable-next-line new-cap
  @Watch('test', { deep: true })
  changes(val: number) {
    // super();
    console.log(val);
  }
}

// export default {
//   msg!: String,
//   setup() {
//     onMounted(() => {
//       console.log(111)
//     })
//   },
//   methods: {
//     test(aa: string) {
//       console.log(aa)
//     }
//   }
// }
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
